<template>
    <div class="register-page">
        <header>
            <router-link to='/login'> &lt;&nbsp;返回 </router-link>
            <span class="text">用户注册</span>
        </header>
        <main>
            <van-form>
                <van-cell-group inset>
                    <van-field
                    v-model="submitObj.id"
                    label="用户编码"
                    placeholder="用户编码"
                    :rules="[{ required: true, message: '请填写用户编码' }]"
                    />
                    <van-field
                    v-model="submitObj.name"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="submitObj.password"
                    type="password"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field name="uploader" label="文件上传">
                        <template #input>
                            <van-uploader v-model="value" :after-read="afterRead" />
                        </template>
                    </van-field>
                    <van-field
                    v-model="submitObj.sex"
                    label="性别"
                    @click="showSex = true"
                    placeholder="性别"
                    />
                    <van-field
                    v-model="submitObj.address"
                    label="地区选择"
                    @click="showAddress = true"

                    placeholder="地区选择"
                    />                    

                    <van-field
                    v-model="submitObj.birthday"
                    label="生日"
                    @click="showBirthday = true"
                    placeholder="生日"
                    />
                 

                    <van-field
                    v-model="submitObj.phone"
                    label="电话"
                    placeholder="电话"
                    :rules="[{ pattern, message: '请输入正确的电话号码' }]"
                    />
                    <van-field
                    v-model="submitObj.email"
                    label="邮箱"
                    placeholder="邮箱"
                    />                    
                    <van-field
                        v-model="submitObj.remark"
                        rows="2"
                        autosize
                        label="备注"
                        maxlength="50"
                        placeholder="备注"
                        show-word-limit
                    />
                </van-cell-group>

                <div style="margin: 16px;">
                    <van-button round block  native-type="submit" color="#d4380d"  @click="submitEvt">
                    提交
                    </van-button>
                </div>
            </van-form>
            <!-- 性别选择器 -->
        <van-popup v-model:show="showSex" position="bottom">
            <van-picker
                :columns="sexOptions"
                @confirm="sexPickerEvt"
                @cancel="showSex = false"
                />
        </van-popup>
        <!-- 地区选择器 -->
        <van-popup v-model:show="showAddress" position="bottom">
            <van-area  
            :columns-num="3"
            @confirm="addressPickerEvt"
            @cancel="showAddress = false"
            :area-list="areaList" 
            />
        </van-popup>

        <!-- 生日选择器 -->
        <van-popup v-model:show="showBirthday" position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="date"
                title="选择年月日"
                @confirm="birthdayPickerEvt"
                @cancel="showBirthday = false"
                :min-date="minDate"
                :max-date="maxDate"
                />
        </van-popup>
        </main>
    </div>
</template>

<script setup  >
    import { Toast } from 'vant'
    import {getRegisterApi} from '../../apis/registerApi'
    import { reactive, ref,onMounted} from 'vue'
    import { useRouter } from 'vue-router'
    import { areaList } from '@vant/area-data'
    const router = useRouter()

    /**文件上传*/
    const afterRead = (file) => {
    /**此时可以自行将文件上传至服务器*/
        console.log(file);
    }
    const value = ref([])
    const submitObj = reactive({
        id: '',
        name: '',
        password: '',
        photo: '',
        sex: '',
        address: '',
        birthday: "",
        phone: '',
        email: '',
        remark: ''
    })
    /**电话号码校验*/
     const pattern = /^1[3-9]{1}[0-9]{9}$/;
    /**性别*/
    const sexOptions = ['保密','女性','男性']
    const showSex = ref(false)
    // 注册事件
    function submitEvt(){
        getRegisterApi(submitObj).then(d =>{
            if(d.code===200){
                Toast.success('注册成功')
                setTimeout(function(){
                    router.back()
                },1500)
            }else{
                Toast.fail('注册失败')
            }
        })
    }
    function sexPickerEvt(val){
        submitObj.sex = val
        showSex.value = false
    }
    /**地区 */
    const showAddress = ref(false)
    let area = ref ('')
    function addressPickerEvt(){
        showAddress.value = false
        submitObj.address= arguments[0][0].name+'/'+arguments[0][1].name+'/'+arguments[0][2].name
    }
    /**生日 */
    const showBirthday = ref(false)
    const currentDate = ref(new Date(2021, 0, 17))
    const minDate = ref (new Date(1990, 0, 1))
    const maxDate = ref (new Date(2025, 10, 1))
    function birthdayPickerEvt(_time){
        showBirthday.value = false
        submitObj.birthday = `${_time.getFullYear()}-${_time.getMonth() + 1}-${_time.getDate()}`
    }
    onMounted(
        async function(){

    })
</script>

<style  scoped   lang="less">
    @import '../../style/common.less';
    .register-page{
        display: block;
        position: relative;
        height: 100%;
        > header{
            position: relative;
            height: 48px;
            background: @c07;
            text-align: center;
            line-height: 48px;
            font-size:  .9rem;
            background: @g00;
            > a{
                float: left;
                position: relative;
                height: 100%;
                font-size: .8rem;
                line-height: 48px;
                padding-left: 15px;
                color: rgb(70, 178, 221);
                z-index: 10;
            }
            > .text {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
        }
        > main {
            height: calc(100% - 48px);
            padding: 20px 0;
            overflow-x: hidden;
        }
    }
</style>